<template>
  <div class="hottopic">
  	<div class="title">
  		<p class="title-head">热门话题</p> 		
  	</div>
  	<div class="conter">
		<p v-for="(element,index) in hottopic" :key="index">{{element}}</p>
	</div>
	
	<div class="title">
		<p class="title-head">活跃成员</p>
	</div>
	<div class="coon">
		<ul class="coon-list">
			<li v-for="(element,index) in members" :key="index">
				<img :src="element.img" alt="">
				<p>{{element.user}}</p>
			</li>
		</ul>
	</div>
	<div class="footer">
		<span>蓝莓派版权所有</span>
		<span>京ICP备12345335号</span>
	</div>
  </div>
</template>

<script>
export default {
  name: 'HotTopic',
  props:{
  	hottopic:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	},
  	members:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	}
  }
}
</script>

<style scoped>
.hottopic{
	background: #fff;
	font-size: 0.16rem;
}
.title{
	border-bottom: 0.01rem solid #E6E6E6;
	padding: 0.1rem  0.15rem;
}
.title .title-head{
	color: #000;
	padding: 0 0 0 0.08rem;
	border-left: 0.05rem solid #F58344;
}
.conter{
	padding: 0 0.15rem;
	margin-bottom: 0.3rem;
}
.conter p{
	padding: 0.15rem 0;
	border-bottom: 0.01rem solid #E6E6E6;
}
.coon{
	margin: 0.15rem ;
}
.coon .coon-list{
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 /*  -webkit-box-align: middle;
  -ms-flex-align: middle; */
  align-items: middle;
  overflow: auto;
}
.coon .coon-list li{
	display: inline-block;
	flex-shrink: 0;
	width: 0.8rem;
	margin-right: 0.1rem;
}
.coon .coon-list li img{
	width: 0.8rem;
	height: 0.8rem;
}
.coon .coon-list li p{
	text-align: center;
	margin: 0.1rem 0;
}
.footer{
	text-align: center;
	color: #A7A7A7;
	padding: 0.5rem 0 0.15rem 0;
}
.footer span{
	margin-right: 0.1rem;
}
</style>